<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getFeedbackListApi, updateFeedbackStatusApi } from '@/api/feedback'

// 投诉建议列表数据
const feedbackList = ref([])

// 搜索条件
const searchParams = ref({
  userName: '',
  status: ''
})

// 分页信息
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 加载状态
const loading = ref(false)

// 详情对话框
const dialogVisible = ref(false)
const dialogTitle = ref('投诉建议详情')
const currentFeedback = ref({})
const editingFeedback = ref({})
const isEditMode = ref(false)
const submitLoading = ref(false)

// 获取投诉建议列表
const handleSearch = async () => {
  loading.value = true
  try {
    const res = await getFeedbackListApi(searchParams.value.userName, searchParams.value.status, currentPage.value, pageSize.value)
    if (res.code) {
      feedbackList.value = res.data.rows || res.data.data || res.data.records || []
      total.value = res.data.total || 0
    } else {
      ElMessage.error(res.msg || '获取投诉建议列表失败')
    }
  } catch (error) {
    ElMessage.error('获取数据异常：' + error.message)
  } finally {
    loading.value = false
  }
}

// 重置搜索条件
const handleReset = () => {
  searchParams.value = {
    userName: '',
    status: ''
  }
  currentPage.value = 1
  handleSearch()
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  handleSearch()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  handleSearch()
}

// 查看详情
const showDetail = (row) => {
  currentFeedback.value = { ...row }
  isEditMode.value = false
  dialogTitle.value = '投诉建议详情'
  dialogVisible.value = true
}

// 直接处理反馈
const handleFeedback = (row) => {
  currentFeedback.value = { ...row }
  editingFeedback.value = { ...row }
  isEditMode.value = true
  dialogTitle.value = '处理反馈'
  dialogVisible.value = true
}

// 开始编辑状态
const startEditStatus = () => {
  editingFeedback.value = { ...currentFeedback.value }
  isEditMode.value = true
  dialogTitle.value = '处理反馈'
}

// 保存状态修改
const saveStatusChange = async () => {
  if (!editingFeedback.value.status) {
    ElMessage.warning('请选择处理状态')
    return
  }
  
  submitLoading.value = true
  try {
    const res = await updateFeedbackStatusApi(
      editingFeedback.value.id,
      editingFeedback.value.status,
      editingFeedback.value.processRemark || ''
    )
    
    if (res.code) {
      ElMessage.success('状态更新成功')
      handleSearch() // 刷新列表
      closeDialog() // 保存成功后直接关闭对话框
    } else {
      ElMessage.error(res.msg || '状态更新失败')
    }
  } catch (error) {
    ElMessage.error('更新失败：' + error.message)
  } finally {
    submitLoading.value = false
  }
}

// 取消编辑
const cancelEdit = () => {
  isEditMode.value = false
  editingFeedback.value = {}
  dialogTitle.value = '投诉建议详情'
}

// 关闭对话框
const closeDialog = () => {
  dialogVisible.value = false
  isEditMode.value = false
  editingFeedback.value = {}
}

// 格式化状态显示
const formatStatus = (status) => {
  const statusMap = {
    '0': '未处理',
    '1': '已处理'
  }
  return statusMap[status] || status
}

// 格式化类型显示
const formatType = (type) => {
  const typeMap = {
    '0': '投诉',
    '1': '建议'
  }
  return typeMap[type] || type
}

// 组件挂载时获取数据
onMounted(() => {
  handleSearch()
})
</script>

<template>
  <h1>投诉建议管理</h1> <br>
  <el-form :inline="true" :model="searchParams">
    <el-form-item label="用户姓名">
      <el-input v-model="searchParams.userName" placeholder="请输入用户姓名"></el-input>
    </el-form-item>

    <el-form-item label="状态">
      <el-select v-model="searchParams.status" placeholder="请选择状态" style="width: 100px;">
        <el-option label="未处理" value="0" />
        <el-option label="已处理" value="1" />
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="handleSearch">查询</el-button>
      <el-button @click="handleReset">清空</el-button>
    </el-form-item>
  </el-form>

  <br><br>

  <!-- 表格 -->
  <el-table :data="feedbackList" border style="width: 100%" v-loading="loading">
    <el-table-column type="index" label="序号" width="100" align="center" />
    <el-table-column prop="userName" label="用户姓名" width="120" align="center"></el-table-column>
    <el-table-column prop="userPhone" label="联系电话" width="120" align="center"></el-table-column>
    <el-table-column prop="type" label="类型" width="80" align="center">
      <template #default="scope">
        {{ formatType(scope.row.type) }}
      </template>
    </el-table-column>
    <el-table-column prop="title" label="标题" min-width="150" align="center"></el-table-column>
    <el-table-column prop="content" label="内容" min-width="200" align="left">
      <template #default="scope">
        <span :title="scope.row.content">{{ scope.row.content }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="status" label="状态" width="100" align="center">
      <template #default="scope">
        <el-tag :type="scope.row.status === '1' ? 'success' : 'warning'">
          {{ formatStatus(scope.row.status) }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="提交时间" width="180" align="center"></el-table-column>
    <el-table-column label="操作" fixed="right" align="center">
      <template #default="scope">
        <el-button size="small" type="primary" @click="handleFeedback(scope.row)">处理反馈</el-button>
      </template>
    </el-table-column>
  </el-table>
  <br>

  <!-- 分页 -->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[5, 10, 20, 30]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  >
  </el-pagination>

  <!-- 详情对话框 -->
  <el-dialog v-model="dialogVisible" :title="dialogTitle">
    <el-form :model="currentFeedback" label-width="80px">
      <el-form-item label="用户姓名">
        <el-input v-model="currentFeedback.userName" disabled></el-input>
      </el-form-item>
      
      <el-form-item label="联系电话">
        <el-input v-model="currentFeedback.userPhone" disabled></el-input>
      </el-form-item>
      
      <el-form-item label="类型">
        <el-input :value="formatType(currentFeedback.type)" disabled></el-input>
      </el-form-item>
      
      <el-form-item label="当前状态">
        <el-input :value="formatStatus(currentFeedback.status)" disabled></el-input>
      </el-form-item>
      
      <el-form-item label="标题">
        <el-input v-model="currentFeedback.title" disabled></el-input>
      </el-form-item>
      
      <el-form-item label="内容">
        <el-input
          v-model="currentFeedback.content"
          type="textarea"
          rows="4"
          disabled
        ></el-input>
      </el-form-item>
      
      <el-form-item label="提交时间">
        <el-input v-model="currentFeedback.createTime" disabled></el-input>
      </el-form-item>
      
      <el-form-item label="处理时间" v-if="currentFeedback.processTime">
        <el-input v-model="currentFeedback.processTime" disabled></el-input>
      </el-form-item>
      
      <el-form-item label="处理备注" v-if="!isEditMode && currentFeedback.processRemark">
        <el-input
          v-model="currentFeedback.processRemark"
          type="textarea"
          rows="4"
          disabled
        ></el-input>
      </el-form-item>
      
      <el-form-item label="新状态" v-if="isEditMode" required>
        <el-select v-model="editingFeedback.status" placeholder="请选择处理状态" style="width: 100%;">
          <el-option label="未处理" value="0" />
          <el-option label="已处理" value="1" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="处理备注" v-if="isEditMode">
        <el-input
          v-model="editingFeedback.processRemark"
          type="textarea"
          rows="4"
          placeholder="请输入处理备注（选填）"
        ></el-input>
      </el-form-item>
    </el-form>

    <!-- 底部按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <template v-if="!isEditMode">
          <el-button @click="closeDetailDialog">取消</el-button>
          <el-button type="primary" @click="startEditStatus" v-if="currentFeedback.status !== '1'">
            处理反馈
          </el-button>
        </template>
        <template v-else>
          <el-button @click="cancelEdit">取消</el-button>
          <el-button type="primary" @click="saveStatusChange" :loading="submitLoading">
            保存修改
          </el-button>
        </template>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.el-form-item {
  margin-bottom: 16px;
}


</style>